<template>
    <div class="comment">
        <div class="container">
            <div class="wrapper">
                <div class="left-sidebar">
                    <ul class="navlist">
                        <li>
                            <a href="/#/user/userinfo">个人资料</a>
                        </li>
                        <li>
                            <a href="/#/user/released">我发布的</a>
                        </li>
                        <li>
                            <a href="/#/user/sold">我卖出的</a>
                        </li>
                        <li>
                            <a href="/#/user/bought">我买到的</a>
                        </li>
                        <li>
                            <a href="/#/user/collected">我收藏的</a>
                        </li>
                        <li>
                            <a href="/#/user/removed">已下架</a>
                        </li>
                    </ul>
                </div>
                <div class="article">
                    <form class="post">
                        <div class="title"><strong>发表评论</strong> / <small>Make&nbsp;Comments</small></div>
                        <!-- <div class="upload-content" v-for="(orderItem, index) in orderItemList" :key="index"> -->
                        <div class="upload-content" v-for="(item, index) in product" :key="index">
                            <div class="product">
                                <div class="pro-img">
                                    <img v-bind:src="item.img" alt="">
                                    <!-- <img v-bind:src="orderItem.itemImg" alt=""> -->
                                    <div class="pro-name">{{item.name}}</div>
                                    <!-- <div class="pro-name">{{orderItem.itemName}}</div> -->
                                    <!-- <div class="pro-name"><small>规格：{{orderItem.itemSpecName}}</small></div> -->
                                </div>
                                <div class="pro-comment">
                                    <div class="item-opinion">
                                        <div><img src="/images/icon/haoping.png">好评</div>
                                        <div><img src="/images/icon/zhongping.png">中评</div>
                                        <div><img src="/images/icon/chaping.png">差评</div>
                                        <!-- <li @click="makeComment(orderItem.id, 1)" :id="'good_'+orderItem.id"><i class="op1"></i>好评</li>
                                        <li @click="makeComment(orderItem.id, 2)" :id="'normal_'+orderItem.id"><i class="op2"></i>中评</li>
                                        <li @click="makeComment(orderItem.id, 3)" :id="'bad_'+orderItem.id"><i class="op3"></i>差评</li> -->
                                    </div>
                                    <div class="item-comment">
                                        <input placeholder="您的评价将会对其他小伙伴们提供很大帮助哟~" maxlength="64" />
                                        <!-- <textarea placeholder="您的评价将会对其他小伙伴们提供很大帮助哟~" v-model="orderItem.content" maxlength="64"></textarea> -->
                                    </div>
                                </div>
                            </div>
                            <div class="comment-btn">
                                <a href="javascript:;" class="btn">发表评论</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'comment',
    data(){
        return {
            product:[
                {
                    img:'/images/book/gaoshu/book-1.jpg',
                    name:'高等数学（上）',
                    price:12,
                    browse:56
                }
            ]
        }
    }
}
</script>
<style lang="scss">
    .comment{
        font: 14px/1.5 "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
        background: #f6f6f6;
        .wrapper{
            display:flex;
            justify-content: space-between;
            .left-sidebar{
                width: 210px;
                height: 300px;
                background: #ffffff;
                border-radius: 4px;
                .navlist{
                    li{
                        height: 48px;
                        line-height: 48px;
                        padding: 0 20px;
                        font-size: 14px;
                        cursor: pointer;
                        position: relative;
                        display: flex;
                        flex-direction: row;
                        i{
                            display: inline-block;
                            position: absolute;
                            left: 0;
                            top: 10px;
                            width: 3px;
                            height: 32px;
                            background: #2b81bd;
                            vertical-align: middle;
                        }
                        a{
                            color: #333333;
                        }
                        &:hover{
                            background: #2b81bd;
                            border-radius: 4px;
                        }
                    }
                }
            }
            .article{
                width: 900px;
                margin-left: 20px;
                box-sizing: border-box;
                border-radius: 4px;
                .post{
                    .title{
                        border-radius: 4px;
                        width: 100%;
                        line-height: 65px;
                        padding: 0 30px;
                        background: #fff;
                        position: relative;
                        box-sizing: border-box;
                    }
                    .upload-content{
                        margin-top: 10px;
                        padding-bottom: 20px;
                        background: #ffffff;
                        border-radius: 4px;
                        height: auto;
                        .product{
                            display: flex;
                            flex-direction: row;
                            border: none;
                            .pro-img{
                                margin: 25px 50px;
                                img{
                                    width: 120px;
                                    height: 120px;
                                }
                                .pro-name{
                                    font-weight: bold;
                                }
                            }
                            .pro-comment{
                                width: 600px;
                                .item-opinion{
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: space-between;
                                    margin: 20px 0;
                                    div{
                                        width: 200px;
                                        text-align: center;
                                        img{
                                            width: 25px;
                                        }
                                    }
                                }
                                .item-comment{
                                    input{
                                        width: 600px;
                                        height: 40px;
                                        border-radius: 4px;
                                        border: 1px solid #ccc;
                                    }
                                }
                            }
                        }
                        .comment-btn{
                            text-align: center;
                            margin: 20px;
                        }
                    }
                }
            }
        }
    }
</style>